﻿@model StudentPortal.Models.webpages_Group

@{
    ViewBag.Title = "Create";
	Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row-fluid">
	<div class="span12">
		<!-- BEGIN SAMPLE FORM PORTLET-->
		<div class="portlet box blue">
			<div class="portlet-title">
				<h4><i class="icon-reorder"></i>Create</h4>
				<div class="tools">
					<a href="javascript:;" class="collapse"></a>
					<a href="#portlet-config" data-toggle="modal" class="config"></a>
					<a href="javascript:;" class="reload"></a>
					<a href="javascript:;" class="remove"></a>
				</div>
			</div>
			<div class="portlet-body form">
				<!-- BEGIN FORM-->
				@using (Html.BeginForm("Create", "Group", FormMethod.Post, new { @class = "form-horizontal" }))
	{
					@Html.ValidationSummary(true)

        <div class="control-group">
					@Html.LabelFor(model => model.GroupName, new { @class = "control-label" })
				<div class="controls">
					@Html.TextBoxFor(model => model.GroupName, new { @class = "medium m-wrap" })
					@Html.ValidationMessageFor(model => model.GroupName)
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Quyền</label>
			<div class="controls">
				@(Html.Kendo().Grid<StudentPortal.Models.webpages_Roles>()
	.Name("Grid")
	.Columns(columns =>
	{
			columns.Bound(c => c.RoleId)
                .ClientTemplate("&nbsp;<input type='checkbox' class='checkRow' value='#= RoleId #' name='RoleIds'/>")
				.HeaderTemplate("<input type='checkbox' class='checkAll' />")
				.Width(40)
				.Title("")
				.HeaderHtmlAttributes(new { style = "text-align:center" })
				.HtmlAttributes(new { style = "text-align:center" })
				.Filterable(false).Groupable(false).Sortable(false);
			columns.Bound(model => model.RoleName);
			columns.Bound(model => model.DisplayName);
	})
	.Groupable()
	.Pageable()
	.Sortable()
	.Events(e => {
                e.DataBound("onDataBound");
            })
	.DataSource(
		dataSource => dataSource.Ajax()
			.Read(read => read.Action("Read", "Roles"))
	)
)
			</div>
		</div>
			<div class="form-actions">
				<button class="btn blue" type="submit">Xác nhận</button>
				@Html.ActionLink("Hủy bỏ", "Index", new { }, new { @class="btn" })
			</div>
}

			</div>
		</div>
	</div>
</div>
<script>
    var selectedIDs = {};
    function onDataBound(e) {
        $('.checkRow').each(function (e) {
            if (selectedIDs[$(this).val()]) {
                $(this).attr('checked', true);
            }
        });
        checkAll(true);
    }
	function checkAll(checked) {

	    var checkAll = false;
	    if (checked) {
	        var checkAll = true;
	        $('.checkRow').each(function (e) {
	            if (!selectedIDs[$(this).val()]) checkAll = false;
	        });

	    }
	    $('.checkAll').attr('checked', checkAll);
	    if (checkAll) $('.checkAll').parent().addClass('checked');
	    else $('.checkAll').parent().removeClass('checked');
	}

	$(document).ready(function () {
	    $('.checkAll').change(function () {
	        var checked = $(this).attr('checked') == 'checked';
	        $('.checkRow').attr('checked', checked);
	        $('.checkRow').each(function () {
	            selectedIDs[$(this).val()] = checked;
	        });
	    });
	    $('.checkRow').live('click', function () {
	        var checked = $(this).attr('checked') == 'checked';
	        selectedIDs[$(this).val()] = checked;
	        checkAll(checked);
	    });
	});

	function gridRefresh() {
		$("#Grid").data("kendoGrid").dataSource.read();
	}
</script>
@*@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}*@
